<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // https://www.douyin.com/user/self?modal_id=7219180869246815546&showTab=favorite_collection
      async function asy1() {
        console.log(1);
        await asy2();
        console.log(2);
      }
      asy2 = async () => {
        // 第一步先输出1,setTimeout进入宏任务队列,输出7,输出6进入微任务队列
        // 第二步输出6,await timerId表示Promise.resolve(一个数字),asy2进入微队列准备完成,因为有await
        // (这里不是很懂,按理说不是await这个语句之后的代码进入微队列吗？还是说因为这个函数里面有await，所以这个函数的完成得在微队列)
        // 第三步完成asy2,输出2进入微任务队列,输出2
        // 第四步输出4,输出3进入微任务队列,输出3

        // 第一组 
        // await setTimeout((_) => {
        //   Promise.resolve().then(() => {
        //     console.log(3);
        //   });
        //   console.log(4);
        // }, 0);

        // 第一步先输出1,执行第一个await的同步代码,之后执行第二个await的同步代码,输出3
        // 第二个await进入微队列准备完成,输出7,输出6进入微任务队列
        // 第二步完成第二个await,输出6,输出4进入微任务队列,输出4
        // 第四步第一个await进入微队列准备完成,完成第一个await
        // 第五步asy2进入微队列准备完成
        // 第六步第三步完成asy2,输出2进入微任务队列
        // 第七步输出2
        // 分析和结果不符合,可能是立即执行函数的问题

        // 第二组
        await (async ()=>{
          await (()=>{
            console.log(3)
          })()
          console.log(4)
        })()

        // 第一步先输出1,执行await后面的同步代码,输出4,asy2进入微队列准备完成,输出3进入微任务队列,输出7,输出6进入微任务队列
        // 第二步完成asy2,输出2进入微任务队列,输出3,输出6,输出2

        // 第三组
        // await (async ()=>{
        //   Promise.resolve().then((_)=>{
        //     console.log(3)
        //   })
        //   console.log(4)
        // })()

        // 第一步先输出1,输出4进入微任务队列,输出7,输出6进入微任务队列
        // 第二步输出4,输出3进入微任务队列,输出6,输出3,输出5,asy2进入微队列准备完成,
        // 第三步完成asy2,输出2进入微任务队列
        // 第四步输出2

        // 第四组
        // await Promise.resolve().then((_)=>{
        //   Promise.resolve().then((_)=>{
        //     console.log(3)
        //   })
        //   console.log(4)
        // })
        // console.log(5)
      };
      asy3 = async () => {
        Promise.resolve().then((_) => {
          console.log(6);
        });
      };
      asy1();
      console.log(7);
      asy3();
    </script>
  </body>
</html>
